<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>WN云音乐-给您最差的音乐体验</title>
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}"/>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/assets/dist/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/assets/css/main.css}" rel="stylesheet">
    <link th:href="@{/assets/css/zplayer.css}" rel="stylesheet">
</head>
<body>
<!--引入导航栏-->
<div th:replace="~{common/topBar::topBar}"></div>

<!--主容器-->
<div id="myMusicDiv" class="container shadow-sm">
    <!--{{categories}}-->
    <br/>
    <div class="row">
        <!--左侧-->
        <div class="container col-3 nav flex-column nav-tabs shadow-sm ">
            <br/>
            <div class="nav flex-column nav-tabs">
                <a class="nav-link active" :href="'/myMusic/mySingerList'">
                    我的歌手
                </a>
            </div>
            <br/>
            <br/>
            <!-- 歌单列表 -->
            <!--创建的歌单-->
            <div class="nav flex-column nav-tabs">
                <a class="nav-link active" data-toggle="collapse" href="#createdSongListDiv">
                    创建的歌单&emsp;
                    <button class="btn btn-info btn-sm" id="myModal" data-toggle="modal" data-target="#addSongListModal">新增</button>
                </a>
            </div>
            <br/>
            <div class="container collapse show nav flex-column">
                <div v-for="sl in createdSongLists.slice(0,1)">
                    <div class="row">
                        <div class="col-3 text-center m-auto">
                            <img :src="sl.songlistImg" alt=".." width="60px" height="60px">
                        </div>
                        <div class="col-9">
                            <a class="nav-link" href="myMusic.html" @click.prevent="showSingleSonglist(sl.songListId)">
                                <p>{{sl.songListName}}</p>
                            </a>
                            <p class="text-muted">{{sl.songCount}}首&emsp;</p>
                        </div>
                    </div>
                </div>

                <div v-for="(sl,index) in createdSongLists" v-if="index>=1">
                    <div class="row">
                        <div class="col-3 text-center m-auto">
                            <img :src="sl.songlistImg" alt=".." width="60px" height="60px">
                        </div>
                        <div class="col-9">
                            <a class="nav-link" href="myMusic.html" @click.prevent="showSingleSonglist(sl.songListId)">
                                <p>{{sl.songListName}}</p>
                            </a>
                            <p class="text-muted">{{sl.songCount}}首&emsp;
                                <button class="btn btn-success  btn-sm" @click="removeSongList(sl.songListId)"> 删除</button>
                                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#editSongListModal"
                                        @click="getSongListInfo(sl.songListId,sl.songListName,sl.songListDescription)">编辑
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--收藏的歌单-->
            <div class="nav flex-column nav-tabs">
                <a class="nav-link active" data-toggle="collapse" href="#collectedSongListDiv">
                    收藏的歌单
                </a>
            </div>
            <br/>
            <div class="container collapse show nav flex-column" id="collectedSongListDiv">
                <div v-for="sl in collectedSongLists">
                    <a class="nav-link" href="#" @click.prevent="showCollectedSingleSonglist(sl.songListId)">
                        <div class="row">
                            <div class="col-3 text-center m-auto">
                                <img :src="sl.songlistImg" alt=".." width="60px" height="60px">
                            </div>
                            <div class="col-9">
                                <p>{{sl.songListName}}</p>
                                <p class="text-muted">{{sl.songCount}}首&emsp;By&emsp; {{sl.userNickname}}</p>
                                <button class="btn btn-success  btn-sm" @click="removeCollectedSongList(sl.songListId)"> 删除</button>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--右侧-->
        <div class="col-9" id="myMusicPlayListDiv">
            <!--  歌单头信息  -->
            <div class="container row">
                <div class="col-4 text-center m-auto">
                    <img class="img-thumbnail" :src="songList.songlistImg" alt=".." width="200px" height="200px">
                </div>
                <div class="col-8">
                    <h3>
                        <span class="badge badge-secondary">歌单</span>
                        &nbsp;{{songList.songListName}}
                    </h3>
                    <p>
                        <a :href="'/user/home/'+songList.userId">
                            {{songList.userNickname}}
                        </a>
                        &emsp; {{songList.createDate}}创建
                    </p>
                    <p>
                        <button class="btn btn-info"
                                @click="playSongList(songList.songListId)"
                                :disabled="songList.songs.length === 0">
                            <span class="glyphicon glyphicon-play"></span> 播放全部</span>
                        </button>
                    </p>
                    <p>收藏量：{{songList.collectionCount}}</p>
                    <p>
                        标签:&nbsp;
                        <a class="btn btn-outline-dark btn-sm" v-for="c in songList.categories">
                            {{c.categoryName}}
                        </a>
                    </p>
                    <p>介绍:&nbsp;
                        {{songList.songListDescription}}
                    </p>
                </div>
            </div>
            <!--  歌曲列表  -->
            <div class="container">
                <h3>歌曲列表</h3>
                <hr/>
                <table class="table">
                    <thead class="thead-light">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">歌曲</th>
                        <th scope="col">歌手</th>
                        <th scope="col">时长</th>
                        <th scope="col">专辑</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="(s,index) in songList.songs">
                        <td>
                            {{index+1}}
                        </td>
                        <td>
                            <a :href="'/song/content?id='+s.songId">
                                {{s.songName}}
                            </a>
                        </td>
                        <td>
                            <a :href="'/singer/content?id='+s.singer.singerId">
                                {{s.singer.singerName}}
                            </a>
                        </td>
                        <td v-text="s.songLength"></td>
                        <td>
                            <a :href="'/album/content?id='+s.albumDto.albumId">
                                {{s.albumDto.albumName}}
                            </a>
                        </td>
                        <td>
                            <button class="btn btn-outline-info btn-sm"
                                    @click="playSong(s.songId)">
                                <span class="glyphicon glyphicon-play"></span>
                            </button>
                            <button class="btn btn-danger  btn-sm"
                                    v-show="ok"
                                    @click="delSongFromSongList(s.songId)">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <br/>
            </div>
            <!--    -->
            <!--  评论列表  -->

        </div>
    </div>

    <!--添加歌单模态框-->
    <div class="modal fade" id="addSongListModal" tabindex="-1" role="dialog" aria-labelledby="addSongListModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addSongListModalLabel">新建歌单</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="table" th:action="@{/songList/addSongList}" method="post" id="addSongListForm">
                        <span>请输入歌单名称：</span>
                        <input type="text" class="form-control" name="songListName" id="songListName"></input>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" @click.prevrnt="addSongList()">确定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--编辑歌单模态框-->
    <div class="modal fade" id="editSongListModal" tabindex="-1" role="dialog" aria-labelledby="editSongListModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editSongListModalLabel">编辑歌单</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="table" id="editSongListForm" action="/songList/modifySongList" method="post"
                          enctype="multipart/form-data">
                        <input type="hidden" name="songListId" v-model="editSongListId" required>
                        <span>歌单名：</span>
                        <input type="text" class="form-control" name="songListName"
                               v-model="editSongListName" required/>
                        <span>标签：</span><br>
                        <span v-for="c in categories">
                            <!--<input type="checkbox" name="categoriesId" :value="c.categoryId" v-model="selectedCategoryId" :id="'check'+c.categoryId">-->
                            <input type="checkbox" name="categoriesId" :value="c.categoryId" v-model="selectedCategoryId">
                            <label :for="'check'+c.categoryId">{{c.categoryName}}</label>

                        </span>
                        <br>
                        <span>介绍：</span>
                        <textarea class="form-control" name="songListDescription" v-model="editSongListDescription"
                                  id="songListDescription" required></textarea>
                        <span>封面：</span>
                        <input type="file" name="songListImg" required/>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确定</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<!--引入页脚-->
<div th:replace="~{common/footer::footer}"></div>

<!--依赖的js-->
<script th:src="@{/assets/js/jquery-3.5.1.js}"></script>
<script th:src="@{/assets/dist/js/bootstrap.js}"></script>
<script th:src="@{/assets/js/vue.js}"></script>

<!--自定义脚本-->
<script th:inline="javascript">
    $("#addSongListModal").modal("hide");

    function getSongListId(ID) {
        $("#id").val(ID);
    }

    let myMusicDiv = new Vue({
        el: '#myMusicDiv',
        data: {
            createdSongLists: {},
            collectedSongLists: {},
            songList: {},
            singers: {},
            categories: [],
            editSongList: {
                editSongListId: 0,
            },
            editSongListId: 0,
            editSongListName: '',
            editSongListDescription: '',
            songListId: 0,
            selectedCategoryId: [],
            ok: true
        },
        methods: {

            showSingleSonglist: function (id) {
                var _this = this;
                /*_this.songList.songListId=id;*/
                $.post("/songList/showSingleSongList", "songListId=" + id, function (data) {
                    _this.songList = data;
                    _this.ok = true;
                }, "json");
            },
            showCollectedSingleSonglist: function (id) {
                var _this = this;

                $.post("/songList/showCollectedSingleSonglist", "songListId=" + id, function (data) {
                    _this.songList = data;
                    _this.ok = false;
                }, "json");
            },
            removeSongList: function (id) {
                if (confirm("确定删除?")) {
                    $.post("/songList/delSingleSongList", "songListId=" + id, function (data) {
                        if (data == 1) {
                            alert("删除成功!");
                            location.reload();
                        } else {
                            alert("删除失败!");
                        }
                    }, "json")

                }
            },

            getSongListInfo: function (a, b, c) {
                this.editSongListId = a;
                this.editSongListName = b;
                this.editSongListDescription = c;
            },


            removeCollectedSongList: function (id) {
                if (confirm("确定删除?")) {
                    $.post("/songList/delCollectedSingleSongList", "songListId=" + id, function (data) {
                        if (data == 1) {
                            alert("删除成功!");
                            location.reload();
                        } else {
                            alert("删除失败!");
                        }
                    }, "json")
                }
            },
            delSongFromSongList: function (id) {
                var songListId = this.songList.songListId;
                if (confirm("确定删除?")) {
                    $.post("/songList/delSongFromSongList", {"songListId": songListId, "songId": id}, function (data) {
                        if (data == 1) {
                            alert("删除成功!");
                            location.reload();
                        } else {
                            alert("删除失败!");
                        }
                    }, "json")
                }
            },


            playSong(songId) {
                if (localStorage.getItem('isPlaying') !== 'true') {
                    localStorage.setItem('newPlayer', 'true');
                    window.open('/playMusic/newPlayer?songId=' + songId, '_blank');
                    return;
                }
                localStorage.removeItem('newSongId');
                localStorage.setItem('newSongId', '' + songId);
            },
            playSongList(songListId) {
                if (localStorage.getItem('isPlaying') !== 'true') {
                    localStorage.setItem('newPlayer', 'true');
                    window.open('/playMusic/newPlayer?songListId=' + songListId, '_blank');
                    return;
                }
                localStorage.removeItem('newSongListId');
                localStorage.setItem('newSongListId', '' + songListId);
            },
        },
        created() {
            this.createdSongLists = [[${createdSongLists}]];
            this.collectedSongLists = [[${collectedSongLists}]];
            this.songList = [[${songList}]];
            this.categories = [[${categories}]];

        }
    })

</script>
</body>
</html>
